<template>
    <div>
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :lg="16" :md="16">
                <div class="left-card">
                    <CountCard title="人数" :duration="6" :number="3400" data="12%"/>
                    <CountCard title="变化指标" :duration="6" :number="2800" :up="false" data="20%"/>
                    <CountCard title="每日交易额" prefix="￥" :duration="6" :up="false" :number="890" data="2%"/>
                    <CountCard title="总体成交量" :duration="6" :number="11204" data="120%"/>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" :md="8">
                <div class="right-card">
                    <CountCard title="今日变化" prefix="￥" :duration="6" :number="120" data="3%"/>
                    <CountCard title="昨日变化" :duration="6" :number="300" :up="false" data="120%"/>
                </div>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :lg="12" style="margin-top: 20px">
                <div style="background:#FFF">
                    <LineChart :xlabel="lineLabel" :legend="xlabel" :data="lineData" height="420px" />
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="6" style="margin-top: 20px">
                <div style="background:#FFF">
                    <DoughunuChart :xlabel="xlabel" :data="doughData" height="420px" />
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="6" style="margin-top: 20px">
                <div style="background:#FFF">
                    <BarChart :xlabel="xlabel" :data="data" height="420px" />
                </div>
            </el-col>
        </el-row>

        <el-row style="margin-top: 20px">
            <el-col :xs="24" :sm="24" :lg="12">
                <div style="background:#FFF">
                    <TableCard/>
                </div>
            </el-col>
            <el-col :span="12"></el-col>
        </el-row>        
    </div>
    
</template>

<script>
import CountCard from './CountCard'
import BarChart from '@/components/Charts/BarChart'
import DoughunuChart from '@/components/Charts/DoughunuChart'
import LineChart from '@/components/Charts/LineChart'
import TableCard from './TableCard'
import { reactive } from 'vue'
export default {
 components:{
     CountCard,BarChart,DoughunuChart,LineChart,TableCard
 },
 setup(){
    const xlabel = reactive(['销售部','采购部','研发部','财务部','运维部','宣传部','人事部'])
    const data = reactive([3000,4200,1600,7800,2321,4832,9200])

    const doughData = reactive([
        {value: 3000, name: '销售部'},
        {value: 4200, name: '采购部'},
        {value: 1600, name: '研发部'},
        {value: 7800, name: '财务部'},
        {value: 2321, name: '运维部'},
        {value: 4832, name: '宣传部'},
        {value: 9200, name: '人事部'},
    ])

    const lineData = reactive([
        {
            name: '销售部',
            type: 'line',
            stack: '总量',
            data: [3000, 2420, 3250, 4000, 4125, 5300, 5700]
        },
        {
            name: '采购部',
            type: 'line',
            stack: '总量',
            data: [2200, 1820, 1910, 2340, 2900, 3300, 3100]
        },
        {
            name: '研发部',
            type: 'line',
            stack: '总量',
            data: [1500, 2320, 2010, 1540, 1900, 3300, 4100]
        },
        {
            name: '财务部',
            type: 'line',
            stack: '总量',
            data: [3200, 3320, 3010, 3340, 3900, 3300, 3200]
        },
        {
            name: '运维部',
            type: 'line',
            stack: '总量',
            data: [8200, 9320, 9010, 9340, 12900, 13300, 13200]
        },
        {
            name: '宣传部',
            type: 'line',
            stack: '总量',
            data: [9200, 13200, 5010, 7000, 8200, 8700, 9200]
        },
        {
            name: '人事部',
            type: 'line',
            stack: '总量',
            data: [3000, 3400, 4789, 5987, 6224, 6432, 1200]
        }
    ])

    const lineLabel = reactive(['周一', '周二', '周三', '周四', '周五', '周六', '周日'])
    return {xlabel,data,doughData,lineLabel,lineData}
 }
}
</script>

<style lang="scss">
.left-card{
    background: #fff;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.right-card{
    background: #fff;
    display: flex;
    justify-content: space-around;
     flex-wrap: wrap;
}
</style>